<template>
    <list-layout
        :pager="pager"
        @handlePagerSizeChange="handlePagerSizeChange"
        @handlePagerIndexChange="handlePagerIndexChange"
    >

        <template #search-btn-group>
            <el-button :icon="Plus" @click="handleAdd" type="primary">添加</el-button>
            <el-button :icon="Delete" @click="handleBatchDel" type="danger">删除</el-button>
        </template>

        <template #table>
            <el-table
                :data="tableData"
                @selection-change="handleSelectionChange"
                v-loading="loading"
            >
                <el-table-column
                    type="selection"
                    width="50"
                >
                </el-table-column>

                <el-table-column
                    label="序号"
                    type="index"
                    width="80"
                >
                </el-table-column>

                <el-table-column label="商品名称">

                </el-table-column>

                <el-table-column label="关联商品Id">

                </el-table-column>

                <el-table-column label="排序">

                </el-table-column>
                
                <el-table-column label="创建时间" prop="createTime">

                </el-table-column>

                <el-table-column label="操作" width="150">
                    <el-link :underline="false" @click="handleEdit" type="primary">编辑</el-link>
                    <el-link :underline="false" @click="handleDel" type="danger">删除</el-link>
                </el-table-column>
            </el-table>
        </template>

        <template #other>
            <add-dialog ref="addDialogRef" :info="dialogInfo" />
        </template>
    </list-layout>
</template>

<script lang="ts" setup>
    import {
        Plus,
        Delete
    } from '@element-plus/icons-vue'
    import addDialog from './components/add-dialog.vue';
    import {ref,reactive,Ref,watch} from 'vue';
    import useCurrentInstance from '@/hooks/useCurrentInstance'

    const {proxy:vm} = useCurrentInstance();
    // 列表
    let tableData = reactive([{}])
    // 选中项
    let selection:object[] = reactive([]);
    let loading:Ref<boolean> = ref(true);

    // 获取商品数据
    const handleSearch = ():void => {
        loading.value = true;
        console.log('获取数据')
        loading.value = false;
    }

    // 编辑 添加弹窗
    const dialogInfo = reactive({
        title: '添加商品',
        formData: {}
    })

    // 添加商品
    interface addDataInterface {
        open: () => void
    }
    const addDialogRef = ref<InstanceType<typeof addDialog> & addDataInterface>();
    const handleAdd = () => {
        dialogInfo.title = '添加商品';
        addDialogRef.value?.open();
    }

    // 删除商品
    const handleDel = () => {
        vm.$confirm('您正在进行删除操作，是否继续？','提示').then(() => {
            
        })
    }
    const handleBatchDel = () => {
        if(!selection.length){
            vm.$message.warning('请先勾选需要删除的条目！');
            return;
        }

        vm.$confirm('您正在进行批量删除操作，是否继续？','提示').then(() => {
            
        })
    }

    // 编辑商品
    const handleEdit = () => {
        dialogInfo.title = '编辑商品';
        dialogInfo.formData = {a: '2213123'}
        addDialogRef.value?.open();
    }

    // 分页
    const pager = reactive({
        pageIndex: 1,
        pageSize: 10,
        itemCount: 100
    })
    const handlePagerIndexChange = (e: number) => {
        pager.pageIndex = e;
    }
    const handlePagerSizeChange = (e: number) => {
        pager.pageSize = e;
    }
    watch([pager],() => {
        handleSearch();
    },{
        immediate: true,
        deep: true
    })

    const handleSelectionChange = (e:object[]) => {
        selection = e;
    }

</script>


<style scoped>

</style>